本文共 4613 字，大约阅读时间需要 15 分钟。

Redux 入门指南

一、 Redux 的基本概念

Redux 是一个专为 React 应用程序设计的状态管理库，它通过统一的存储空间（Store）来管理应用程序的状态。 Redux 的主要作用是促进组件间的高效通信，避免了传值的复杂性。

Redux 的主要作用

Redux 的主要作用是通过存储空间（Store）实现组件间的状态共享和数据传递。在没有 Redux 时，组件间只能通过传值的方式进行通信，这种方式在组件嵌套较深时会变得非常繁琐。使用 Redux，您可以通过上下文（Context）将 Store 传递到整个应用程序的根部，实现全局状态管理。

Redux 的主要流程

Redux 的使用流程可以分为以下几个步骤：

组件发起 Action：组件通过调用 dispatch 函数发起一个 Action。

Action 进入 Reducer：Action 包含一个 type 字段，Reducer 根据 type 字段修改 Store 的状态。

Store 状态更新：Reducer 函数返回新的状态，Store 自动跟踪并更新状态。

组件订阅 Store 状态：组件可以通过订阅 Store 的状态变化来响应状态更新。

二、 Redux 的安装与配置

1. 创建 React 项目

使用 npx create-react-app 创建一个新的 React 项目：

npx create-react-app [项目名称]

2. 安装 Redux 及相关工具

安装必要的依赖包：

npm install redux react-redux

3. 创建 Redux 存储文件

对于小型项目，可以将所有 Redux 相关代码放在一个文件中。建议的目录结构如下：

src/
  store/
    action-types.js
    action.js
    reducer.js
    index.js

三、 Redux 的基本使用

1. 定义 Action 类型

在 store/action-types.js 中定义常量：

export const ADD = 'ADD';
export const MINUS = 'MINUS';

2. 定义 Reducer 函数

在 store/reducer.js 中定义 Reducer 函数：

import * as types from './action-types';
import { fromJS } from 'immutable';
const initialState = fromJS({
  number: 0
});
function reducer(state = initialState, action) {
  switch (action.type) {
    case types.ADD:
      return state.set('number', state.get('number') + 1);
    case types.MINUS:
      return state.set('number', state.get('number') - 1);
    default:
      return state;
  }
}
export default reducer;

3. 定义 Action 方法

在 store/actions.js 中定义 Action 方法：

import * as types from './action-types';
export default {
  add: (payload) => ({
    type: types.ADD,
    payload
  }),
  minus: (payload) => ({
    type: types.MINUS,
    payload
  })
};

4. 集成 Redux 到 React 应用

在主组件中使用 Provider 组件将 Redux Store 注入到 React 应用：

import { Provider } from 'react-redux';
import store from './store';
ReactDom.render(
  
   
    
    
  
   ,
  document.getElementById('root')
);

5. 组件消费 Redux 状态

在组件中使用 connect 函数将 Redux 状态映射到组件的属性：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import action from '../store/actions';
class Count1 extends Component {
  render() {
    return (
      
   
        
     this.props.minus}>-
        
    {this.props.number}
        
     this.props.add}>+
      
   
    );
  }
}
const mapStateToProps = state => ({
  number: state.get('number')
});
export default connect(mapStateToProps, action)(Count1);

四、多组件开发中的 Redux 使用

在复杂项目中，建议将 Redux 相关代码分成多个文件，例如：

store/
  action-types.js
  actions/
    count1.js
    count2.js
  reduces/
    count1.js
    count2.js
  index.js

1. 分目录结构

创建目录结构：

mkdir -p store/actions store/reduces

2. 定义 Action 和 Reducer

在 store/actions/count1.js 中定义 Action 方法：

import * as types from '../action-types';
export function add() {
  return { type: types.ADD };
}
export function minus() {
  return { type: types.MINUS };
}

在 store/reduces/count1.js 中定义 Reducer：

import * as types from '../action-types';
import { fromJS } from 'immutable';
export function reducer(state = fromJS({ number: 0 })) {
  switch (state.getIn(['action', 'type'])) {
    case types.ADD:
      return state.set('number', state.get('number') + 1);
    case types.MINUS:
      return state.set('number', state.get('number') - 1);
    default:
      return state;
  }
}

3. 合并 Reducer

在 store/reduces/index.js 中合并 Reducer：

import { combineReducers } from 'redux';
import count1 from './count1';
import count2 from './count2';
const reducers = {
  count1,
  count2
};
export default combineReducers(reducers);

4. 创建 Store

在 store/index.js 中创建 Redux Store：

import { createStore } from 'redux';
import reducer from './reduces';
export default createStore(reducer);

五、使用 Immutable 状态管理

1. 安装 Immutable

安装 Immutable 库：

npm install immutable

2. 初始化状态

在 Reducer 中使用 Immutable 初始化状态：

import { fromJS } from 'immutable';
const initialState = fromJS({
  number: 10
});

3. 修改 Reducer 函数

在 Reducer 中使用 Immutable 的 set 和 get 方法：

switch (action.type) {
  case types.ADD:
    return state.set('number', state.get('number') + 1);
  case types.MINUS:
    return state.set('number', state.get('number') - 1);
  default:
    return state;
}

4. 修改组件

在组件中使用 Immutable 状态：

const mapStateToProps = state => ({
  number: state.get('number')
});

六、使用 Redux-Immutable

1. 什么是 Redux-Immutable？

Redux-Immutable 是一个增强版的 Redux 库，它提供了 Immutable 数据结构的支持。

2. 安装 Redux-Immutable

安装依赖包：

npm install redux-immutable

3. 修改 Reducer

在 Reducer 中使用 Redux-Immutable：

import { combineReducers } from 'redux-immutable';
import count1 from './count1';

4. 修改组件

在组件中使用 Redux-Immutable 状态：

const mapStateToProps = state => ({
  number: state.get('count1').get('number')
});

通过以上步骤，您可以在 React 应用中成功使用 Redux 进行状态管理。如果需要更深入的学习，可以参考官方文档或相关教程。

转载地址：http://njvf.baihongyu.com/